<template>
  <div>
    <div class="head">
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img
              src="http://120.53.31.103:84/uploads/image/2020-07-12/TePAomPYrs6dNXjPuLiV0V0WQWSMD7XG0h0wOF70.jpeg"
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="http://120.53.31.103:84/uploads/image/2020-07-12/WZqbP3uFW1Se7JKxkdmGMa57iCDNvNJ4G5mihZ3n.jpeg"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="http://120.53.31.103:84/uploads/image/2020-07-12/oNiAZrbXiCK8iCJWgTPnZMGxBjSvJDuqlMhzrz9D.jpeg"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="http://120.53.31.103:84/uploads/image/2020-07-12/oNiAZrbXiCK8iCJWgTPnZMGxBjSvJDuqlMhzrz9D.jpeg"
              alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="head-nav">
        <van-grid :gutter="10">
          <van-grid-item
            icon=""
            text="特色课"
            @click="gotocourse"
          />
          <van-grid-item
            icon=""
            text="一对一辅导"
          />
          <van-grid-item
            icon=""
            text="学习日历"
          />
        </van-grid>
      </div>
    </div>

    <div class="home-container">
      <!-- 明星讲师 -->
      <p class="home-title">
        <span v-if="teachlist.channel_info">
          <i class="red">&emsp;&emsp;</i>
          {{ teachlist.channel_info.name }}</span
        >
        <span>更多 <van-icon name="arrow" /></span>
      </p>
      <div
        v-for="item in teachlist.list"
        :key="item.teacher_id"
        class="home-list"
      >
        <img :src="item.teacher_avatar" />
        <div class="home-list-content">
          <p>{{ item.teacher_name }}</p>
          <p class="introduction">{{ item.introduction }}</p>
        </div>
      </div>
      <!-- 精品课程 -->
      <p class="home-title">
        <span v-if="courselist.channel_info">
          <i class="red">&emsp;&emsp;</i>
          {{ courselist.channel_info.name }}</span
        >
        <span>更多 <van-icon name="arrow" /></span>
      </p>
      <div
        v-for="item in courselist.list"
        :key="item.id"
        class="home-courselist"
        @click="gotocourseDetail(item.id)"
      >
        <p class="courselist-1">{{ item.title }}</p>
        <div class="courselist-2">
          <p>共{{ item.total_periods }}課時</p>
        </div>
        <div class="courselist-3">
          <p class="pp">
            <img :src="item.teachers_list[0].teacher_avatar" /><span
              style="margin-left: 2.26667vw"
              >{{ item.teachers_list[0].teacher_name }}</span
            >
          </p>
        </div>
        <p class="courselist-4">
          <span style="color: rgba(0, 0, 0, 0.45)"
            >{{ item.sales_num }}人已报名</span
          >
          <span>{{
            item.price == 0 ? "免费" : item.price * 0.01 + ".00"
          }}</span>
        </p>
      </div>
      <!-- 热门资讯 -->
      <p class="home-title">
        <span v-if="messagelist.channel_info">
          <i class="red">&emsp;&emsp;</i>
          {{ messagelist.channel_info.name }}</span
        >
        <span>更多 <van-icon name="arrow" /></span>
      </p>
      <div
        v-for="item in messagelist.list"
        :key="item.id"
        class="home-courselist"
        @click="gotonewsDetail(item.id)"
      >
        <p class="courselist-1">{{ item.title }}</p>
        <div class="courselist-2">
          <p>共{{ item.total_periods }}課時</p>
        </div>
        <div class="courselist-3">
          <p class="pp">
            <img :src="item.teachers_list[0].teacher_avatar" /><span
              style="margin-left: 2.26667vw"
              >{{ item.teachers_list[0].teacher_name }}</span
            >
          </p>
        </div>
        <p class="courselist-4">
          <span style="color: rgba(0, 0, 0, 0.45)"
            >{{ item.sales_num }}人已报名</span
          >
          <span>{{
            item.price == 0 ? "免费" : item.price * 0.01 + ".00"
          }}</span>
        </p>
      </div>
      <!-- 明星講師 -->
      <p class="home-title">
        <span v-if="recommendlist.channel_info">
          <i class="red">&emsp;&emsp;</i>
          {{ recommendlist.channel_info.name }}</span
        >
        <span>更多 <van-icon name="arrow" /></span>
      </p>
      <div v-for="item in recommendlist.list" :key="item.id" class="oc-item">
        <img :src="item.teacher_avatar" alt="" />
        <div>
          <p class="teacher_name">
            {{ item.teacher_name }} <span>{{ item.level_name }}</span>
          </p>
          <p class="introduction">{{ item.introduction }}</p>
        </div>
      </div>
    </div>
    <div class="btm"></div>
  </div>
</template>
<script>
export default {
  filters: {
    formatDate: function (val) {
      let d1 = Number(val) * 1000;
      let date = new Date(d1);
      //注意对方给你的是毫秒还是秒，如果是毫秒需要转秒（*1000）
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "/" + MM + "/" + d + " " + h + ":" + m + ":" + s;
    },
  },
  data() {
    return {
      list: [],
      teachlist: [],
      courselist: [],
      messagelist: [],
      recommendlist: [],
    };
  },
  mounted() {
    this.getappIndex();
  },
  methods: {
    getappIndex() {
      this.$API.getappIndex().then((res) => {
        this.list = res.data.data;
        this.teachlist = this.list[0];
        this.courselist = this.list[1];
        this.messagelist = this.list[2];
        this.recommendlist = this.list[3];
      });
    },
    gotocourseDetail(id) {
      this.$router.push({ path: "/courseDetail", query: { id } });
    },
    gotonewsDetail(id) {
      this.$router.push({ path: "/newsDetail", query: { id } });
    },
    gotocourse() {
      this.$router.push({ path: "/course" });
    },
  },
};
</script>
<style lang="scss">
.head {
  width: 100%;
  height: 44vh;
  position: relative;
}
.head-nav {
  position: absolute;
  width: 100%;
  bottom: 40px;
  .van-grid {
    justify-content: space-around;
  }
}
.banner {
  width: 100%;
  height: 30vh;
  img {
    width: 100%;
    height: 30vh;
  }
}
.home-container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  background-color: #f7f8fa;
  .home-title {
    font-weight: 500;
    color: #595959;
    display: flex;
    justify-content: space-between;
    font-size: 0.4rem;
    border-left: 4px solid red;
    box-sizing: border-box;
    padding-left: 8px;
  }
  .home-list {
    width: 100%;
    display: flex;
    height: 15vh;
    align-items: center;
    margin: 10px 0;
    background-color: white;
    box-sizing: border-box;
    padding: 10px 10px;
    border-radius: 10px;
    img {
      width: 22%;
      height: 10vh;
      border-radius: 50%;
    }
    .home-list-content {
      width: 78%;
      margin-left: 20px;
      .home-list-title {
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .introduction {
        width: 95%;
        color: #b7b7b7;
        font-size: 0.3rem;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.home-courselist {
  background: #fff;
  border-radius: 0.13333rem;
  border-radius: 1.33333vw;
  padding: 0 0.37333rem;
  padding: 0 3.73333vw;
  margin-bottom: 0.4rem;
  margin-bottom: 4vw;
  position: relative;
  .courselist-1 {
    padding-top: 4vw;
  }
  .courselist-2 {
    display: flex;
    align-items: center;
  }

  .courselist-3 {
    display: flex;
    height: 100%;
    align-items: center;
    .pp {
      display: flex;
      height: 100%;
      align-items: center;
      font-size: 3.2vw;
      color: rgba(0, 0, 0, 0.45);
      img {
        width: 7.2vw;
        height: 7.2vw;
        border-radius: 50%;
      }
    }
  }

  .courselist-4 {
    border-top: 1px solid #f5f5f5;
    height: 11.73333vw;
    line-height: 11.73333vw;
    display: flex;
    font-size: 3.46667vw;
    justify-content: space-between;
  }
}
.oc-item {
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  padding: 0 4vw;
  background: #fff;
  border-radius: 0.10667rem;
  border-radius: 1.06667vw;
  height: 2.16rem;
  height: 21.6vw;
  margin-top: 0.26667rem;
  margin-top: 2.66667vw;
  img {
    width: 10.66667vw;
    height: 10.66667vw;
    margin-right: 3.2vw;
    border-radius: 50%;
    flex: none;
  }
  div {
    .teacher_name {
      font-size: 4vw;
      color: #595959;
      line-height: 5.6vw;
      padding-right: 1.33333vw;
      span {
        font-size: 2.93333vw;
        color: #ea7a2f;
      }
    }
    .introduction {
      width: 73.33333vw;
      font-size: 3.2vw;
      height: 4vw;
      padding-top: 1.33333vw;
      color: #b7b7b7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.btm {
  width: 100%;
  height: 10vh;
}
</style>
